<template>
<view class="community">
	<view class="head_bg"></view>
	<view class="operating_box" style="margin-top:-180rpx">
		<view class="padding-sm">
			<view class="text-black text-lg">三木小区{{info.residential_quarters_name}}</view>
			<view class="padding-top-xs text-grey text-df padding-bottom-sm solid-bottom">
				<image class="community_msg_icon" src="../../../common/img/dizhi_hui.png" mode=""></image>
				深圳深圳深圳深圳
			{{info.residential_quarters_address}}</view>
			<view class="padding-top-sm  text-black text-df">
				<text>终端地址：{{info.equipment_number}}</text>
				<view style="float: right;color:#4DA4FA" @tap="togzsb">
					故障上报
				</view>
			</view>
		</view>
	</view>
	<view class="margin-top-xs bg-white" style="margin-top:20rpx;">
		<view class="padding-sm text-black text-lg">请选择端口</view>
		<view class="flex bg-white text-center padding-sm">
			<view class="flex-sub">
				<view class="text-center" @tap="selleftpot" :class="[leftcheck==0?'unsel':'sel']">
					<view v-if="info.left_socket_status==0" class="bjys">空闲</view>
					<view v-else class="bjys">占用</view>
				
				</view>
				<view class="">1号</view>
				<!-- <view class="cu-avatar bg-img" 
				style="background-image:url(../../../common/img/unseldk.png);height:150rpx;width:150rpx;"></view> -->
				<!-- <image src="../../../common/img/unseldk.png" style="width:150rpx;height:150rpx;"></image> -->
			</view>
			<view class="flex-sub">
				<view class="text-center" @tap="selrightpot" :class="[rightcheck==0?'unsel':'sel']">
					<view v-if="info.right_socket_status==0" class="bjys">空闲</view>
					<view v-else class="bjys">占用</view>
				</view>
				<view class="">2号</view>
			</view>
		</view>
	</view>
	<scroll-view scroll-x class="bg-white nav" style="margin-top:20rpx;">
		<view class="flex text-center">
			<view v-if="info.ontime_free!=null" class="cu-item flex-sub" :class="TabCur==0?'text-orange cur':''" @tap="tabSelect" :data-id="0">
				按时计费
				<view>{{info.ontime_max_power}}(瓦以下)</view>
			</view>
			<view v-if="info.amount_free!=null" class="cu-item flex-sub" :class="TabCur==1?'text-orange cur':''" @tap="tabSelect" :data-id="1">
				按功率计费
				<view>{{info.amount_max_power}}(瓦以下)</view>
			</view>
			<view v-if="info.electricity_free!=null" class="cu-item flex-sub" :class="TabCur==2?'text-orange cur':''" @tap="tabSelect" :data-id="2">
				按电费计费
				<view>{{info.electricity_fees}}(元1度)</view>
			</view>
		</view>
	</scroll-view>
	<block v-if="info.ontime_free!=null && TabCur==0">
		<view class="bg-white padding-sm text-df text-black">收费标准(电池充满或者被中断,收费金额将不会退还)</view>
		<view class="flex bg-white text-center">
			<view class="flex-sub" v-for="(info,ind) in aslist" :key="ind">
				<button :class="index==ind?'txzys':''" @tap="jeSelect" :data-id="ind" :data-num="info.ontime_money" 
				    :data-sc="info.ontime_hour" class="cu-btn line-gray text-black">
					{{info.ontime_money}}元{{info.ontime_hour}}小时
				</button>
			</view>
			<!-- <view class="flex-sub">
				<button :class="index==2?'txzys':''" @tap="jeSelect" :data-id="2" :data-num="10" 
				class="cu-btn line-gray text-black">1.10元4小时</button>
			</view>
			<view class="flex-sub">
				<button :class="index==3?'txzys':''" @tap="jeSelect" :data-id="3" :data-num="20" 
				class="cu-btn line-gray text-black">1.10元4小时</button>
			</view> -->
		</view>
	    <view class="padding-sm text-df text-red bg-white">
			注意:大功率电动车按时收费可能被拒充,请选择按量收费,凡因充电器引发的问题,造成的后果将由车主自行承担.
		</view>
		<view class="padding-sm text-df text-grey bg-white">
			提示:如充电器功率过载,充电达到12小时，,充电器被拔等情况,有可能导致电池不能充满,请自己根据实际情况予以判断.
		</view>
		<view class="margin-top-xs bg-white padding-sm text-df text-black solid-bottom">支付方式</view>
		<radio-group class="block" @change="jsfcChange">
			<view class="cu-form-group">
				<view class="title">
					<text class="">
						<radio class='blue' checked="" style="transform:scale(0.8)" value="0"></radio>
						<text class="margin-left-xs text-df ">我的余额：{{info.balance}}元</text>
					</text>
				</view>
				<view style="float:right;margin-right:10rpx;" @tap="torecharge">
					<button class="cu-btn bg-blue" style="padding:18rpx">余额充值</button>
				</view>
			</view>
			<!-- <view class="cu-form-group">
				<view class="title">
					<text class="">
						<radio class='blue' checked="" style="transform:scale(0.8)" value="0"></radio>
						<text class="margin-left-xs text-df ">微信支付</text>
					</text>
				</view>
			</view> -->
		</radio-group>
		<view style="height:150rpx;"></view>
		<view class="foot">
		   <button type="button" class="cu-btn block bg-blue lg" @tap="toF()">开始充电</button>
		</view>
	</block>
	<block v-if="info.amount_free!=null && TabCur==1">
		<view class="bg-white padding-sm text-df text-black">收费标准(依照当前充电功率大小实际计费)</view>
		<view class="flex text-center bg-white">
			<view class="flex-sub">
				<button :class="index==1?'txzys':''" @tap="jeSelect" :data-id="1" :data-num="1" 
				 class="cu-btn line-gray text-black alys">1元</button>
			</view>
			<view class="flex-sub">
				<button :class="index==2?'txzys':''" @tap="jeSelect" :data-id="2" :data-num="3"
				class="cu-btn line-gray text-black alys">3元</button>
			</view>
			<view class="flex-sub">
				<button :class="index==3?'txzys':''" @tap="jeSelect" :data-id="3" :data-num="4" 
				class="cu-btn line-gray text-black alys">4元</button>
			</view>
		</view>
		<view class="flex text-center bg-white margin-top-sm">
			<view class="flex-sub" v-for="(info,index) in allist" :key="index">
				<view>{{info.begin_wattage}}—{{info.end_wattage}}瓦</view>
				<view>{{info.amount_money}}元/小时</view>
			</view>
			<!-- <view class="flex-sub">
				<view>100—200瓦</view>
				<view>0.3元/小时</view>
			</view>
			<view class="flex-sub">
				<view>200—400瓦</view>
				<view>0.4元/小时</view>
			</view>
			<view class="flex-sub">
				<view>400—700瓦</view>
				<view>0.6元/小时</view>
			</view> -->
		</view>
		<view class="padding-sm text-df text-red bg-white">
			注意:按量收费采用先预付后付费的方式进行收费,请依照自身的充电功率选择预付金额.凡因充电器引发的问题，造成的后果将由车主自行承担.
		</view>
		<view class="padding-sm text-df text-grey bg-white">
			提示:按量收费是根据用户充电时的实际功率分时段进行收费,每时段为一分钟,不足一分钟的按一分钟算.任何情况下停止充电后,
			将不再进行扣费,同时系统自动退回本次的剩余金额.
		</view>
		<view class="margin-top-xs bg-white padding-sm text-df text-black solid-bottom">支付方式</view>
		<radio-group class="block" @change="jsfcChange">
			<view class="cu-form-group">
				<view class="title">
					<text class="">
						<radio class='blue' checked="" style="transform:scale(0.8)" value="0"></radio>
						<text class="margin-left-xs text-df ">我的余额：{{info.balance}}元</text>
					</text>
				</view>
				<view style="float:right;margin-right:10rpx;" @tap="torecharge">
					<button class="cu-btn bg-blue" style="padding:18rpx">余额充值</button>
				</view>
			</view>
			<!-- <view class="cu-form-group">
				<view class="title">
					<text class="">
						<radio class='blue' checked="" style="transform:scale(0.8)" value="0"></radio>
						<text class="margin-left-xs text-df ">微信支付</text>
					</text>
				</view>
			</view> -->
		</radio-group>
		<view style="height:150rpx;"></view>
		<view class="foot">
		   <button type="button" class="cu-btn block bg-blue lg" @tap="toF()">开始充电</button>
		</view>
	</block>
	<block v-if="info.amount_free!=null && TabCur==2">
		<view class="bg-white padding-sm text-df text-black">收费标准(依照当前设置电费实时计费)</view>
		<view class="flex text-center bg-white">
			<view class="flex-sub">
				<button :class="index==4?'txzys':''" @tap="jeSelect" :data-id="4" :data-num="1" 
				 class="cu-btn line-gray text-black alys">1元</button>
			</view>
			<view class="flex-sub">
				<button :class="index==5?'txzys':''" @tap="jeSelect" :data-id="5" :data-num="3" 
				class="cu-btn line-gray text-black alys">3元</button>
			</view>
			<view class="flex-sub">
				<button :class="index==6?'txzys':''" @tap="jeSelect" :data-id="6" :data-num="5" 
				class="cu-btn line-gray text-black alys">5元</button>
			</view>
		</view>
		<view class="padding-sm text-df text-red bg-white">
			注意:按电费收收费采用先预付后付费的方式进行收费,请依照自身的充电功率选择预付金额.凡因充电器引发的问题，造成的后果将由车主自行承担.
		</view>
		<view class="bg-white padding-sm text-df text-black">服务费标准</view>
		<view class="flex text-center bg-white">
			<view class="flex-sub" v-for="(info,index) in adflist" :key="index">
				<button @tap="jeSelect" :data-id="1" :data-num="info.elecriciy_money" 
				 class="cu-btn line-gray text-black ">{{info.elecriciy_money}}元{{info.end_hour}}小时</button>
			</view>
			<!-- <view class="flex-sub">
				<button :class="index==2?'txzys':''" @tap="jeSelect" :data-id="2" :data-num="10" 
				class="cu-btn line-gray text-black">1元8小时</button>
			</view>
			<view class="flex-sub">
				<button :class="index==3?'txzys':''" @tap="jeSelect" :data-id="3" :data-num="20" 
				class="cu-btn line-gray text-black ">1.5元12小时</button>
			</view> -->
		</view>
		
		<view class="padding-sm text-df text-grey bg-white">
			提示:服务费是给用户提供充电服务收费,每时段为一分钟,不足一分钟的按一分钟算.任何情况下停止充电后,
			将不再进行扣费,同时系统自动退回本次的剩余金额.
		</view>
		<view class="margin-top-xs bg-white padding-sm text-df text-black solid-bottom">支付方式</view>
		<radio-group class="block" @change="jsfcChange">
			<view class="cu-form-group">
				<view class="title">
					<text class="">
						<radio class='blue' checked="" style="transform:scale(0.8)" value="0"></radio>
						<text class="margin-left-xs text-df ">我的余额：{{info.balance}}元</text>
					</text>
				</view>
				<view style="float:right;margin-right:10rpx;" @tap="torecharge">
					<button class="cu-btn bg-blue" style="padding:18rpx">余额充值</button>
				</view>
			</view>
			<!-- <view class="cu-form-group">
				<view class="title">
					<text class="">
						<radio class='blue' checked="" style="transform:scale(0.8)" value="0"></radio>
						<text class="margin-left-xs text-df ">微信支付</text>
					</text>
				</view>
			</view> -->
		</radio-group>
		<view style="height:150rpx;"></view>
		<view class="foot">
		   <button type="button" class="cu-btn block bg-blue lg" @tap="toF()">开始充电</button>
		</view>
	</block>
	
</view>
</template>

<script>
	import { pathToBase64, base64ToPath } from '../../../components/js_sdk/gsq-image-tools/image-tools/index.js'
	export default {
		data() {
			return {
				leftcheck:0,//左边是否选中
				rightcheck:0,//右边是否选中
				port:'',//端口
				je:0,//消费金额
				sc:0,//充电时长
				TabCur:0,
				index:-1,
				info:'',
				balance:0.00,
				src:'',
				scode:'',
				aslist:[],//按时收费
				allist:[],//按量收费
				adflist:[],//按电费收费
			}
		},
		onLoad(options)
		{
			let oinfo = JSON.parse(options.dinfo);
			this.info = oinfo;
			
			this.aslist=oinfo.ontime_free;
			this.allist=oinfo.amount_free;
			this.adflist=oinfo.electricity_free;
			
			// this.scode = options.scode
			// this.getdata();
			// this.info = JSON.parse(options.dinfo);
			// uni.showToast({
			// 	icon: '获取设备信息:'+options.info,
			// 	title: '获取设备信息'
			// });
			// this.dinfo=info;
			// this.aslist=info.ontime_free;
			// this.allist=info.amount_free;
			// this.adflist=info.electricity_free;
		},
		onShow() {
			// let openid = uni.getStorageSync("openid");
			// if(openid){
			//     this.ischaring();
			// }else{
			// 	this.getwxinfo() 
			// }
		},
		methods: {
			//判断是否正在充电
			ischaring(){
				let that=this;
				that.http.tokenreq({
					url: 'user/v1/chargingstatus',
				}).then((res) => {
					let e=res.data;
					uni.showModal({
						content: JSON.stringify(res.data),
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								
							}
						}
					});
					if(e.code==0 && e.success){
						uni.navigateTo({
							url: '/pages/user/charging/chargingnow'
						})
						return;
					}else{
						uni.showToast({
							icon: 'none',
							title: '获取设备信息'
						});
						that.getdata();
					}
				})
			},
			getdata(){
	
				let that = this;
				that.http.tokenreq({
					url: 'user/v1/getdinfo',
					data: {
						"equipment_number": that.scode,
					}
				}).then((res) => {
					let e = res.data;
					uni.showToast({
						icon: 'none',
						title: e
					});
					
					if (e.code == 0 && e.success) {
						let dinfo=e.data;
						this.info = dinfo;
						that.aslist=dinfo.ontime_free;
						that.allist=dinfo.amount_free;
						that.adflist=dinfo.electricity_free;
					} else {
						uni.showToast({
							icon: 'none',
							title: e.message
						});
						setTimeout(()=>{
							uni.navigateTo({
								url: "/pages/user/my/my"
							})
						},2000)
					}
				})
			},
			getWeiXin() {
				//跳转
				window.location.href = 'http://evcssappapi.yushengkeji.cn/user/v1/getweixincode'
			},
			getwxinfo() {
				let openid = uni.getStorageSync("openid");
				if (openid) {
					let that = this;
					that.http.postJSON({
						url: 'user/v1/login',
						data: {
							"openid": openid,
						}
					}).then((res) => {
						// uni.showToast({
						// 	title:'res='+JSON.stringify(res),
						// 	icon:'none'
						// })
						if (res.data.code == 0 && res.data.success == true) {
							uni.showToast({
								title: '登录成功!',
								icon: 'none'
							})
							uni.setStorageSync("token", res.data.data.token);
							this.menuauthority = res.data.data.menuauthority
							uni.setStorageSync("menuauthority", this.menuauthority);
						} else {
							this.getWeiXin();
						}
					})
				} else {
					this.getWeiXin();
				}
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			//选择端口
			selleftpot(){
				let info=this.info;
				if(info.left_socket_status==1){
					reurn;
				}
				if(this.leftcheck==0){
					this.leftcheck=1;
				}
				if(this.rightcheck==1){
					this.rightcheck=0;
				}
				this.port="0";
				console.log("port=="+this.port);
			},	
			selrightpot(){
				let info=this.info;
				if(info.right_socket_status==1){
					reurn;
				}
				if(this.leftcheck==1){
					this.leftcheck=0;
				}
				if(this.rightcheck==0){
					this.rightcheck=1;
				}
				this.port="1";
			},	
			jeSelect(e) {
				this.index = e.currentTarget.dataset.id;
				this.je=e.currentTarget.dataset.num;
				if(this.TabCur==0){
					this.sc=e.currentTarget.dataset.sc;
				}else{
					this.sc="0";
				}
			},
			
			//故障上报
			togzsb(){
				uni.navigateTo({
					url:'/pages/user/pay/declare?item='+JSON.stringify(this.info)
				})
			},
			//余额充值
			torecharge(){
				uni.navigateTo({
					url: '/pages/user/recharge/recharge?balance='+this.balance
				})
			},
			//开始充电
			toF(){
				if(this.port=='' || this.port==null){
			        console.log("port222="+this.port);
					uni.showToast({
						icon: 'none',
					    title: '请选择充电端口'
					});
					return;
				}
				if(this.je=='' || this.je==null){
					uni.showToast({
						icon: 'none',
					    title: '请选择充电金额'
					});
					return;
				}
				let that=this;
				
				that.http.tokenreq({
					url: 'user/v1/charging',
					data: {
						"equipment_number":this.info.equipment_number,
						"charging_method":this.TabCur,
						"consumption_pattern":"0",
						"frozen_amount":this.je,
						"charging_minutes":this.sc,
						"socket_port":this.port
					}
				}).then((res) => {
					// uni.showModal({
					// 	content: this.info.equipment_number+","+this.TabCur+","+this.je+","+this.sc+","+this.port,
					// 	showCancel:false,
					// 	success: function (res) {
					// 		if (res.confirm) {
								
					// 		}
					// 	}
					// });
					let e=res.data;
					console.log("eee="+JSON.stringify(e));
					if(e.code==0 && e.success){
						uni.showModal({
							content: e.message,
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/user/charging/chargingnow'
									})
								}
							}
						});
					}else{
						uni.showToast({
							icon: 'none',
						    title: e.message
						});
					}
				})
			}
		}
	}
</script>

<style>
	
	.operating_box{
		padding-bottom:0px;
	}
	.foot{
		position: fixed;
		left: 0;
		bottom: 0;
		width:100%;
	}
	/* .head_bg{
		height:150rpx;
	} */
	/* .nav .cu-item{
		height:120rpx;
		line-height:60rpx;
		padding:10rpx 20rpx;
	} */
	.txzys{
		background-color:#0081FF;
		color: white;
		border:1rpx solid #FFFFFF;
	}
	.cu-btn{
		padding:50rpx 30rpx; 
	}
	.alys{
		padding:50rpx 80rpx; 
	}
	.unsel{
		background-image: url(../../../common/img/unseldk.png);
		background-repeat: no-repeat;
		background-position: center;
		/* width: 150rpx; */
		height: 150rpx;
	}
	.sel{
		background-image: url(../../../common/img/seldk.png);
		background-repeat: no-repeat;
		background-position: center;
		/* width: 150rpx; */
		height: 150rpx;
	}
	.bjys{
		padding-top:105rpx;
		padding-left:40rpx;
		font-size:26rpx;
	}
	.border-bottom{
		border-bottom:5rpx solid #249FFB;
		color:#249FFB;
		padding-bottom:5px
	}
</style>
